<template>
  <div>
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
    <!-- 宫格 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
        />
      </van-grid-item>
    </van-grid>


    <!-- 列表 -->
     <div @click="toxiang">
        <dl v-for="item in data">
            <dt>
                <img :src="item.goods_small_logo" alt="">
            </dt>
            <dd>
                <span>{{item.goods_name}}</span>
                <p style="color:red;">￥{{item.goods_price}}</p>
            </dd>
        </dl>
     </div>
  </div>
</template>

<script setup>
import { loginApi } from "@/api/mock";
import { ref } from "vue";
//跳转
import { useRouter } from "vue-router";
let router=new useRouter()

let data=ref([])
loginApi().then((res) => {
  console.log(res);
  data.value=res.data.message.goods
});


const toxiang=(v)=>{
    router.push({
        path:'/xiang/'+v.goods_id,
        query:v
    })
}
</script>

<style lang="scss" scoped>
dl{
    width: 180px;
    height: 280px;
    // background: pink;
    float: left;
    margin-left: 6px;
}
dl dt img{
    width: 150px;
    height: 150px;
}
</style>
